<template>
  <div class="file-list-content">
    <div class="file-list-header">
      <h2>{{ currentNode.label }}</h2>
      <div class="file-count">
        共 {{ filteredFiles.length }} 个文件
      </div>
    </div>

    <el-table
      :data="filteredFiles"
      style="width: 100%"
      empty-text="当前目录没有文件"
      @row-click="handleFileClick"
    >
      <el-table-column prop="label" label="文件名" min-width="200">
        <template #default="{ row }">
          <div class="file-name-cell">
            <el-icon class="file-icon">
              <component :is="getFileIcon(row)" />
            </el-icon>
            <span>{{ row.label }}</span>
          </div>
        </template>
      </el-table-column>
      
      <el-table-column prop="size" label="大小" width="120">
        <template #default="{ row }">
          {{ formatFileSize(row.size) }}
        </template>
      </el-table-column>
      
      <el-table-column prop="uploadDate" label="上传日期" width="180" />
      
      <el-table-column label="操作" width="150">
        <template #default="{ row }">
          <el-button
            size="small"
            type="primary"
            @click.stop="$emit('preview-file', row)"
          >
            预览
          </el-button>
          <el-button
            size="small"
            type="danger"
            @click.stop="$emit('delete-file', row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { formatFileSize, getFileIcon } from '@/utils/document'

defineProps({
  currentNode: Object,
  filteredFiles: Array
})

const emit = defineEmits(['file-click', 'delete-file', 'preview-file'])

const handleFileClick = (file) => {
  emit('file-click', file)
}
</script>

<style scoped>
.file-list-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.file-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid #ebeef5;
}

.file-list-header h2 {
  margin: 0;
  color: #303133;
  font-size: 20px;
}

.file-count {
  color: #909399;
  font-size: 14px;
}

.file-name-cell {
  display: flex;
  align-items: center;
}

.file-icon {
  margin-right: 8px;
  font-size: 18px;
}
</style>